<template>
  <el-card class="i-errata">
    <el-table :data="tableData" style="width: 100%" key="errata">
      <el-table-column prop="goodsName" label="图书名称" width="180"> </el-table-column>
      <el-table-column prop="price" label="价格" min-width="100">
        <template v-slot="{ row }">
          <el-tag type="danger" effect="plain">{{ row.price | $ }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="{ row }">
          <el-tag :type="orderState[row.status].type">
            {{ orderState[row.status].label }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" width="180">
        <template v-slot="{ row }">
          {{ row.updateTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-link type="success" :underline="false" @click="gotoDetail(row)" :disabled="row.status !== 3">
            前往阅读
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-if="tableData.length" @size-change="handleSizeChange($event, fetchData)"
      @current-change="handleCurrentChange($event, fetchData)" :page-sizes="[1, 2, 5, 10]"
      layout="total, prev, pager, next" :total="total" class="t-pagination">
    </el-pagination>
  </el-card>
</template>

<script>
import mixin from '@mixins'
import { orderState } from '@static'
import { mapState } from 'vuex'
export default {
  mixins: [mixin.admin],
  data() {
    return {
      tableData: [],
      orderState
    }
  },
  methods: {
    async fetchData() {
      const { list, total } = await this.$api.getOrderByUser({ ...this.query, keyword: this.user.id })
      this.tableData = list
      this.total = total
    },
    gotoDetail(item) {
      this.$router.push({ name: 'bookDetail', params: { id: item.goodsId } })
    }
  },
  computed: {
    ...mapState({ user: 'currentUser' })
  },
  created() {
    this.fetchData()
  }
}
</script>

<style></style>
